<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" >
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="app">
			<div class="container">
				<div class="chaxunInformation">
					<p>信息查询</p>
					<div class="chaxun">
						<form class="pure-form pure-form-stacked fl">
							 <div class="pure-control-group fl">
								<label for="name">物品名称</label>
								<input id="name" type="text" placeholder="物品名称" v-model="updata_name">
							</div>
							<div class="pure-control-group fl">
								<label for="state">库存状态</label>
								<select id="state" v-model="updata_state">
									<option></option>
									<option>充足</option>
									<option>待补充</option>
								</select>
							</div>
							<div class="clear"></div>
						</form>
						<button class="pure-button fr" @click="getstate">查询</button>
						<div class="clear"></div>
					</div>
				</div>
				<div class="btn">
					<button class="button-success pure-button" @click="addInformation">添加</button>
					<button class="button-error pure-button" @click="updataInformation">修改</button>
					<button class="button-warning pure-button" @click="deleInformation">删除</button>
				</div>
				<table class="pure-table">
					<thead>
						<tr>
							<th>
								<input type="checkbox">
							</th>
							<th>物品ID</th>
							<th>物品名称</th>
							<th>单价</th>
							<th>单位</th>
							<th>数量</th>
							<th>库存状态</th>
							<th>库存预警</th>
							<th>创建时间</th>
							<th>修改时间</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in list">
							<td>
								<input type="checkbox" 
										:value="item.item_id" 
										v-model="ids">
							</td>
							<td>{{item.item_id}}</td>
							<td>{{item.item_name}}</td>
							<td>{{item.item_price}}</td>
							<td>{{item.item_format}}</td>
							<td>{{item.item_total}}</td>
							<td>{{item.item_state}}</td>
							<td>{{item.item_inventory}}</td>
							<td>{{item.create_time}}</td>
							<td>{{item.update_time}}</td>
						</tr>
					</tbody>
				</table>
				<div class="page">
					<label for="state">总共{{total}}条</label>
					<select id="state fl" v-model="size" @change="getpageupdata">
						<option value="5">5</option>
						<option value="10" selected=''>10</option>
						<option value="15">15</option>
					</select>条
					<ul class="fr">
						<li @click="getpagenum(curr == 1? curr:curr-1)">上一页</li>
						<li v-for="item in pagenum" @click="getpagenum(item)" :class="{active : item == curr?true:false}">{{item}}</li>
						<li @click="getpagenum(pagenum == curr?curr:curr+1)">下一页</li>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
			<!-- 添加 -->
			<div class="adddata" v-cloak v-show="xiaoshi">
				<form class="pure-form pure-form-stacked">
					<p>添加信息</p>
					<div class="addbottom">
						<div class="pure-g">
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="first-name">物品名称</label>
								<input id="first-name" class="pure-u-23-24" type="text" v-model="add_name">
							</div>
									
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单价</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="add_price">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单位</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="add_format">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">数量</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="add_total">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">库存预警</label>
								<input id="last-name" class="pure-u-23-24" type="text" v-model="add_inventory">
							</div>
						</div>
						<div class="box">
							<button type="submit" class="pure-button pure-button-primary">取消</button>
							<button type="submit" class="pure-button pure-button-primary" @click="determine">确定</button>
						</div>
					</div>
				</form>
			</div>
			<!-- 修改 -->
			<div class="updatabox"v-cloak v-show="updataxiaoshi">
				<form class="pure-form pure-form-stacked">
					<p>修改信息</p>
					<div class="updatabottom">
						<div class="pure-g">
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="first-name">物品名称</label>
								<input id="first-name" class="pure-u-23-24" type="text" >
							</div>
									
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单价</label>
								<input id="last-name" class="pure-u-23-24" type="text">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">单位</label>
								<input id="last-name" class="pure-u-23-24" type="text">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">数量</label>
								<input id="last-name" class="pure-u-23-24" type="text">
							</div>
							<div class="pure-u-1 pure-u-md-1-3">
								<label for="last-name">库存预警</label>
								<input id="last-name" class="pure-u-23-24" type="text">
							</div>
						</div>
						<div class="box">
							<button type="button" class="pure-button pure-button-primary">取消</button>
							<button type="button" class="pure-button pure-button-primary" @click="determine">确定</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>
